<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录系统</title>

    <!--引入弹窗swal的CSS-->
    <link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">
    <script type="text/javascript" src="https://blog.huangwx.cn/js/sweetalert-dev.js"></script>

    <style type="text/css">
        html {font-size: 10px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        .layout {width: 100%;}
        .layout：after{content: " ";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
        .tonav{background: #061f41;url()center no-repeat;background-size: 100% auto;}
        .tonav .pos-tl {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
        .tonav nav{padding-top: 20px;padding-bottom: 20px;}
        .login_in .wrap{background-color: #fff;padding: 30px;}
        .login_in .wrap .title{color: #061f41;padding: 10px 0;border-bottom: 1px solid #bfbfbf;position: relative;font-size: 1.8rem;}
        .login_in .wrap .title:after{content: "";bottom: 0;left: 0;width: 150px;height: 2px;background-color: #061f41;}
        .login_in .wrap .title span{display: inline-block;width: 150px;text-align: center;}
        .login_in .wrap .item{width: 305px;height: 41px;margin: 31px 0 15px 0;background-color: #FFF;border: 1px solid #BFBFBF;}
        .login_in .wrap .item .ico{font-size: 1.6rem;color: #BFBFBF;padding: 0 8px;}
        .login_in .wrap input[type="text"], .login_in .wrap input[type="password"]{font-size: 1.4rem;border: none;width: 263px;height: 38px;background-color: #FFF;outline: none;}
        .login_in .wrap .item-submit{text-align: center;}
        .login_in .wrap input[type="submit"]{border: none;color: #fff;background-color: #061f41;padding: 10px 0;font-size: 1.8rem;width: 305px;}
        .login_in .wrap .dl_zidong{text-align: right;margin-bottom: 20px;vertical-align: middle;}
        .login_in .wrap .dl_zidong input {width: 16px;height: 16px;vertical-align: middle;}
        .login_in .wrap .dl_zidong span{vertical-align: middle;}
        .login_in .wrap .dl_title{display: flex;justify-content: space-between;padding-top: 10px;}
        .login_in .wrap .dl_if{color: #061f41;cursor: pointer;}
        .login_in .wrap .dl_forget{color: #6d6e71;}
    </style>
</head>


<body style="background-color: rgb(12,6,48)">

<!--登录样式1-->
    <a href="/" class="site-logo">
        <img src="../static/img/Logo-ST.png" height="60px">
    </a>
    <div class="layout tonav pos-r">
        <div class="login_in pos-tl">
            <div class="wrap">
                <center><p class="pd-bottom title"><span>登录系统</span></p></center>
<!--                post方式:action路径需要在路径后加/-->
                <form class="form-login" method="POST" autocomplete="off" action="/login/">
                    {%csrf_token%}   <!--csrf验证-->
                    <div class="item">
                        <span class="ico i-user"></span>
                       <input type="text" name="phone" id="phone"  value="" placeholder="请输入手机号码" required="required" minlength="11" oninput="if(value.length>11)value=value.slice(0,11)">
                    </div>
                    <div class="item">
                        <span class="ico i-unlock-alt"></span>
                        <input type="password" name="password" value="" placeholder="请输入登录密码" required="required" />
                    </div>
                    <div class="item-submit">
                        <input type="submit" value="登 录"/>
                    </div>
                    <br/>
                    <div class="dl_title">
                        <a href="/register" class="dl_if">注册新用户</a>
                        <a href="/">返回首页</a>
                        <a href="/forget" class="dl_forget">忘记密码？</a>
                    </div>
                </form>
            </div>
        </div>
    </div>


<!--	花里胡哨登录样式-->
<!--    <div class="login">-->
<!--    	<h2>登录系统</h2>-->
<!--    	<form method="POST" autocomplete="off" action="/login/">-->
<!--    		{%csrf_token%}   &lt;!&ndash;csrf验证&ndash;&gt;-->
<!--    		<div class="login_box">-->
<!--    			<input type="text" name="phone" id="phone" value="" required="required" minlength="11"-->
<!--    				   oninput="if(value.length>11)value=value.slice(0,11)" onblur="checkphone()">-->
<!--    			<label for="phone">手机号</label>-->
<!--    		</div>-->
<!--    		<div class="login_box">-->
<!--    			<input type="password" name="password" id="password" value="" required="required"/>-->
<!--    			<label for="password">密码</label>-->
<!--    		</div>-->
<!--    		<div class="login_button">-->
<!--    			<input type="submit" value="登 录" style="font-size: 20px"/>-->
<!--    		</div>-->
<!--    		<br/>-->
<!--    		<a href="/register" class="login_button">注册新用户</a>-->
<!--    		<a href="/" class="login_button">返回首页</a>-->
<!--    		<a href="/forget" class="login_button">忘记密码？</a>-->
<!--    	</form>-->
<!--    </div>-->

</body>


<!--处理弹窗-->
<script>
    {% if messages %}
        {% for msg in messages %}
            swal('{{ msg.message }}');
        {% endfor %}
    {% endif %}
</script>


<style type="text/css">
*{
	/*初始化 清除页面元素的内外边距*/
	padding: 0;
	margin: 0;
	/*盒子模型*/
	box-sizing: border-box;
}
body {
	/*弹性布局 让页面元素垂直+水平居中*/
	display: flex;
	justify-content: center;
	align-items: center;
	/*让页面始终占浏览器可视区域总高度*/
	height: 100vh;
	/*背景渐变色*/
	background: linear-gradient(#141e30,#243b55);
}
.login{
    text-align: center;
	/*弹性布局 让子元素称为弹性项目*/
	display: flex;
	/*让弹性项目垂直排列  原理是改变弹性盒子的主轴方向
	父元素就是弹性盒子  现在改变后的主轴方向是向下了*/
	flex-direction: column;
	/*让弹性项目在交叉轴方向水平居中  现在主轴的方向是向下
	交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/
	align-items: center;
	width: 400px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

.login h2{
	color: #fff;
	margin-bottom: 30px;
}
.login .login_box {
	/*相对定位*/
	position: relative;
	width: 100%;
}
.login .login_box input{
	/*清除input框自带的边框和轮廓*/
	outline: none;
	border: none;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 30px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	/*背景颜色为透明色*/
	background-color: transparent;
}

.login .login_box label{
	position:absolute;
	top: 0 ;
	left: 0;
	padding: 10px 0;
	color: #fff;
	/*这个属性的默认值是auto 默认是这个元素可以被点击
	但是如果我们写了none  就是这个元素不能被点击，就好像它可见但是不能用
	可望而不可及*/
	/*这个就是两者的区别*/
	pointer-events: none;
	/*加个过度*/
	transition: all 0.5s;
}
/*: focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器
	去找与input相邻的兄弟label*/
/*：valid 选择器是判断input 框的内容是否合法，如果合法会执行下面的属性代码，
	不合法就不会执行，我们刚开始写布局的时候给input框写了required 我们删掉看对比
	当没有required的话   input框的值就会被认为一直合法，所以一直都是下方的样式，
	但是密码不会，密码框的值为空，那么这句话就不合法，required不能为空
	当我们给密码框写点东西的时候才会执行以下代码
*/
.login .login_box input:focus + label,
.login  .login_box input:valid + label{
	top: -20px;
	color: #03e9f4;
	font-size: 12px;
}

.login a{
	/*overflow: hidden;*/
	position: relative;
	padding: 10px 20px;
	color: #03e9f4;
	/*取消a表现原有的下划线*/
	text-decoration: none;
	/*同样加个过渡*/
	transition: all 0.5s;
}
.login a:hover {
	color: #fff;
	border-radius: 5px;
	background-color: #03e9f4;
	box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;
}
.login .login_button input{
    /*overflow: hidden;*/
    position: relative;
    padding: 10px 20px;
    color: #03e9f4;
    /*取消a表现原有的下划线*/
    text-decoration: none;
    /*同样加个过渡*/
    transition: all 0.5s;
    background-color: #501755;
}
.login .login_button input:hover {
    color: #fff;
    border-radius: 5px;
    background-color: #03e9f4;
    box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;
}

</style>


</html>
